<template>
	<div class="intention-premise">
		<premise-search
				@choose-region="chooseRegion"
				:region="region"
				@search="searchByName"
		></premise-search>
		<div v-show="chooseRegionVisible">
			<div style="display: flex;width: 100%">
				<mt-picker
						style="flex: 1"
						value-key="name"
						:slots="provinceList" @change="provinceChange"/>
				<mt-picker
						style="flex: 1"
						value-key="name"
						:slots="cityList" @change="cityChange"/>
				<mt-picker
						style="flex: 1"
						value-key="name"
						:slots="areaList" @change="areaChange"/>
			</div>
			<p style="text-align: right">
<!--				<span @click="chooseRegion" class="choose-region">清除</span>-->
<!--				<span @click="chooseRegion" class="choose-region">选定</span>-->
			</p>
		</div>
		<p style="padding: 10px 20px 0;">
			提示:本次最多报备<span class="color-orange">{{REPORT_PREMISE_MAX}}</span>个楼盘
		</p>
		<mt-loadmore v-if="premisesList.length"
								 :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
			<ul class="premise-list" >
				<li class="premise-list-item"
						v-for="(row1, index) in premisesList"
						:key="index"
						@click="choosePremise(row1, index)">
					<p class="premise-name">{{row1.premisesName}}
						<i class="premise-info-icon" :class="{'active': row1.active }"></i>
					</p>
					<p class="premise-info-item">所在地区：
						<span>{{row1.fullAreaName}}</span>
					</p>
					<p class="premise-info-item">最短报备时间：<span>提前{{row1.specialTime}}</span></p>
					<p class="premise-info-item">已推荐客户：<span>{{row1.recommendCount}}</span></p>
					<p></p>
					<p></p>
				</li>
			</ul>
		</mt-loadmore>
		<div v-else style="height: 300px; text-align: center; padding-top: 130px;font-size: 20px;">
			<p>没有楼盘</p>
		</div>
		<div>
			<button class="btn-block" style="margin: 10px auto" @click="decisionPremises">已选择{{selectedList.length}}个楼盘，确认选择</button>
		</div>
	</div>
</template>
<script>
	import {Service, Utils} from '../../../../js/base'
	const REPORT_PREMISE_MAX = 20
	import PremiseSearch from './PremiseSearch.vue'
	export default{
		components: {
			PremiseSearch
		},
		data(){
			return {
				REPORT_PREMISE_MAX: REPORT_PREMISE_MAX,
				premisesList:[],
				selectedList: this.list,
				premisesForm: {
					areaId: '',  // 区域id (Long)
					cityId: '', //城市id (Long)
					name: "",// 楼盘名称
					pageNo: '1',// 当前页码
					pageSize: '1000' , //页面大小
					provinceId: '', //省份id (Long)
				},
				popupVisible: false,
				chooseRegionVisible: false,
				provinceList: [{ values: [],}],
				cityList: [{ values: [],}],
				areaList: [{ values: [],}],
				region:{
					province: {},
					city: {},
					area: {},
				}, //省市区选中
				emptyList: [{name: '请选择', id: null}],
				allLoaded: false,
			}
		},
		props: {
			list: {
				type: Array,
				default: function () {
					return []
				}
			}
		},
		mounted() {
			this.init()
		},
		watch: {
			list: {
				handler (val) {
					this.selectedList = val || []
					this.premisesList.forEach(item => {
						let curItem = this.selectedList.find(i => i.premisesId === item.premisesId )
						if(curItem) {
							item.active = true
						} else {
							item.active = false
						}
					})
				},
				deep: true,
				immediate: true,
			},
		},
		methods:{
			init () {
				if(!this.premisesList.length) { //
					this.getPremiseList();
				}
			},
			loadBottom() {
				this.premisesForm.pageNo = Number(this.premisesForm.pageNo) + 1 + ''
				this.getPremiseList('loading');
				//this.allLoaded = true;// 若数据已全部获取完毕
				//this.$refs.loadmore.onBottomLoaded();
			},
			provinceChange (picker, values) {
				this.region.province = values[0]
				if(values && values[0]) {
					//console.log(`获取${values[0].name}城市列表 id= ${values[0].id}`)
					this.premisesForm.provinceId = values[0].id
					if(values[0].id) {
						this.getCity(values[0].id)
					} else {
						this.$set(this.cityList[0], 'values', this.emptyList)
					}

				}
			},
			cityChange (picker, values) {
				this.region.city = values[0]
				if(values && values[0]) {
					// console.log(`获取${values[0].name}地区列表  id= ${values[0].id}`)
					this.premisesForm.cityId = values[0].id
					if(values[0].id) {
						this.getArea(values[0].id)
					} else {
						this.$set(this.areaList[0], 'values', this.emptyList)
					}
				}
			},
			areaChange(picker, values) {
				this.region.area = values[0]
				this.premisesForm.areaId = values[0] && values[0].id || ''
			},
			/***
			 * 选择区域
			 */
			chooseRegion () {
				this.chooseRegionVisible = !this.chooseRegionVisible
				if(!this.provinceList[0].values.length) {
					this.getProvince()
				}
				if(!this.chooseRegionVisible ) {
					this.premisesForm.name = ''
					this.premisesForm.pageNo = '1'
					this.getPremiseList();
				}
			},
			/**
			 * 获取楼盘列表
			 */
			getPremiseList (type) {
				const _this = this
				let params = this.premisesForm;
				params.companyUuid = Utils.getQueryString('companyUuid')
				// todo
				// 第二次进入，回显之前已选择的
				Service.Premise.getPremiseList({params, _this}).then(list => {
					if(list.rows) {
						this.list.forEach(item => {
							list.rows.forEach(row => {
								if( row.premisesId === item.premisesId ) {
									row.active = true;
								}
							})
						})
					}
					if(type !== 'loading') {
						_this.premisesList = list.rows;
					} else { // 下拉刷新
						_this.premisesList = [..._this.premisesList, ...list.rows]
					}

				})
			},
			choosePremise(row, index) {
				let flag = !Boolean(row.active)
				if(flag) { // 选中
					if(this.selectedList.length > REPORT_PREMISE_MAX - 1) {
						Utils.showWarnMsg(`最多选择${REPORT_PREMISE_MAX}个楼盘`)
						return
					}
					this.selectedList.push(row)
				} else {
					let index = this.selectedList.findIndex(item => row.premisesId === item.premisesId)
					if(index > -1) {
						this.selectedList.splice(index, 1)
					}
				}
				this.$set(this.premisesList[index], 'active', flag)
			},
			decisionPremises(){
				this.$emit('choose-premise', this.selectedList);
			},
			/**
			 * 获取省份列表
			 */
			getProvince() {
				const _this = this
				Service.Common.getProvinceList({_this}).then(list => {
					_this.provinceList[0].values = [...this.emptyList, ...list];
				})
			},
			/**
			 * 获取城市列表
			 */
			getCity(provinceId = 0) {
				const _this = this
				Service.Common.getCityList({_this, provinceId}).then(list => {
					//_this.cityList = list;
				  _this.$set(_this.cityList[0], 'values', [...this.emptyList, ...list])
				})
			},
			/**
			 * 获取区列表
			 */
			getArea(cityId = 0) {
				const _this = this
				Service.Common.getAreaList({_this, cityId}).then(list => {
				  _this.$set(_this.areaList[0], 'values', [...this.emptyList, ...list])
				})
			},
			/***
			 * 楼盘名称搜索
			 * @param name
			 */
			searchByName (name) {
				this.premisesForm.provinceId = ''
				this.premisesForm.cityId = ''
				this.premisesForm.areaId = ''
				this.premisesForm.name = name
				this.premisesForm.pageNo = '1'
				this.premisesForm.pageSize = '10'
				this.getPremiseList ()
			}
		}
	}
</script>
<style lang="less" scoped>
	@main-color: #ff7900;
	.intention-premise {
		.color-orange {
		 	color: @main-color;
		}
		.search-container {
			.search-icon, .location-icon {
				display: inline-block;
				@size: 24px;
				width: @size;
				height: @size;
				background-repeat: no-repeat;
			}
			.location-icon {
				background-image: url("../../../../assets/images/location.png");
			}
			.search-icon {
				background-image: url("../../../../assets/images/search.png");
			}
		}
		.premise-list{
				margin: 0;
				height: 450px;
				overflow-y: scroll;
				.premise-list-item {
					padding: 10px 20px;
					margin: 12px 0;
					background-color: #fff;
					.premise-name {
						color: #333333;
						font-size: 14px;
						margin: 7px 0px;
						font-weight: 600;
					}
				}
				.premise-info-icon {
					display: inline-block;
					float: right;
					width: 24px;
					height: 24px;
					background-repeat: no-repeat;
					background-image: url("../../../../assets/images/not-selected.png");
					&.active {
						background-image: url("../../../../assets/images/selected.png");
					}
				}
				.premise-info-item {
					padding: 3px 0;
					color: #898989;
					font-size: 12px;
					span {
						color: @main-color;
					}
				}
			}
	}

</style>
